<template>
  <el-dialog
    v-model="dialogVisible"
    custom-class="t_material_preview"
    :fullscreen="true"
    width="960px">
    <svg-icon class="close-icon" name="close3" @click="close" />
<!--    <span class="close-icon" @click="close">
       <svg-icon class="close-icon" name="close3" />-
&lt;!&ndash;      <i class="el-icon-close">X</i>&ndash;&gt;
    </span>-->
    <el-carousel indicator-position="none" :autoplay="false" arrow="always">
      <template v-for="(item, index) in material" :key="index">
        <el-carousel-item v-if="item.material_type === 1">
          <img :src="item.material_url" alt="">
          <div class="material_name">图片-{{item.material_name}}</div>
        </el-carousel-item>
        <el-carousel-item v-else-if="item.material_url">
<!--          <video :src="item.material_url" controls="controls"></video>-->
          <div class="material_name">视频-{{item.material_name}}</div>
        </el-carousel-item>
        <el-carousel-item v-if="item.cover_url">
          <img :src="item.cover_url" alt="">
          <div class="material_name">封面-{{item.material_name}}</div>
        </el-carousel-item>
        <!--快手封面广告语-->
        <el-carousel-item v-if="item.cover_slogan?.length > 0">
          <div class="cover_slogan">
            <div class="cover_slogan_title">封面广告语</div>
            <div v-for="(i, iIndex) in item.cover_slogan" :key="iIndex">{{i}}</div>
          </div>
        </el-carousel-item>
        <!--快手封面贴纸-->
        <template v-if="item.sticker?.length > 0">
          <el-carousel-item v-for="(i, iIndex) in item.sticker" :key="iIndex">
            <img :src="i.sticker_styles[0]?.overlay_preview_url" alt="">
          </el-carousel-item>
        </template>
      </template>
    </el-carousel>
  </el-dialog>
</template>

<script>
import { reactive, toRefs } from "vue";
// import Video from "./Video";

export default {
  name: "materialPreview",
  // components: {Video},
  setup() {
    const state = reactive({
      dialogVisible: false,
      material: []
    })
    const open = (data) => {
      state.material = data
      state.dialogVisible = true
    }
    const close = () => {
      state.dialogVisible = false
      state.material = []
    }
    return {
      ...toRefs(state),
      open,
      close
    }
  }
}
</script>

<style lang="scss">
.t_material_preview{
  background: rgba(0, 0 , 0, 0);
  box-shadow: none;
  .el-dialog__header{
    display: none;
  }
  .el-dialog__body{
    padding: 0;
    height: 100%;
    position: relative;
    .close-icon{
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 1000;
      cursor: pointer;
      font-size: 18px;
      background: rgba(31, 45, 61, 0.11);
      color: #FFFFFF;
      display: inline-block;
      width: 36px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      border-radius: 50%;
    }
  }
  .el-carousel{
    height: 100%;
  }
  .el-carousel__container{
    height: 100%;
    .el-carousel__item {
      font-size: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      img, video{
        max-height: 100%;
        max-width: 100%;
        display: inline-block;
      }
    }
    .cover_slogan{
      width: 320px;
      background: #FFFFFF;
      padding: 20px;
      max-height: 420px;
      overflow: auto;
      font-size: 14px;
      .cover_slogan_title{
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
